{% extends "base.html" %}

{% block title %}我创建的任务{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>我创建的任务</h2>
        <div>
            <a href="{{ url_for('main.home') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left me-2"></i>返回首页
            </a>
            <a href="{{ url_for('task.task_form') }}" class="btn btn-primary">
                <i class="fas fa-plus me-2"></i>创建新任务
            </a>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <h5 class="mb-0">任务列表</h5>
                </div>
                <div class="col-md-6 text-end">
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-outline-primary active" onclick="filterTasks('all')">全部</button>
                        <button type="button" class="btn btn-outline-primary" onclick="filterTasks('未开始')">未开始</button>
                        <button type="button" class="btn btn-outline-primary" onclick="filterTasks('进行中')">进行中</button>
                        <button type="button" class="btn btn-outline-primary" onclick="filterTasks('已完成')">已完成</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-body">
            {% if tasks %}
                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>任务名称</th>
                                <th>项目</th>
                                <th>负责人</th>
                                <th>状态</th>
                                <th>优先级</th>
                                <th>进度</th>
                                <th>截止日期</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for task in tasks %}
                                <tr data-status="{{ task.status }}">
                                    <td>
                                        <a href="{{ url_for('project.project_detail', id=task.project_id) }}#task-{{ task.id }}">{{ task.name }}</a>
                                        {% if task.description %}
                                            <small class="d-block text-muted">{{ task.description[:50] }}{% if task.description|length > 50 %}...{% endif %}</small>
                                        {% endif %}
                                    </td>
                                    <td>{{ task.project.name }}</td>
                                    <td>{{ task.assignee.name if task.assignee else '未分配' }}</td>
                                    <td>
                                        {% if task.status == '未开始' %}
                                            <span class="badge bg-secondary">{{ task.status }}</span>
                                        {% elif task.status == '进行中' %}
                                            <span class="badge bg-primary">{{ task.status }}</span>
                                        {% elif task.status == '已完成' %}
                                            <span class="badge bg-success">{{ task.status }}</span>
                                        {% else %}
                                            <span class="badge bg-danger">{{ task.status }}</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if task.priority == '高' %}
                                            <span class="badge bg-danger">{{ task.priority }}</span>
                                        {% elif task.priority == '中' %}
                                            <span class="badge bg-warning">{{ task.priority }}</span>
                                        {% else %}
                                            <span class="badge bg-info">{{ task.priority }}</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <div class="progress" style="height: 20px;">
                                            <div class="progress-bar" role="progressbar" style="width: {{ task.progress }}%;" 
                                                 aria-valuenow="{{ task.progress }}" aria-valuemin="0" aria-valuemax="100">
                                                {{ task.progress }}%
                                            </div>
                                        </div>
                                    </td>
                                    <td>{{ task.end_date.strftime('%Y-%m-%d') if task.end_date else '-' }}</td>
                                    <td>
                                        <div class="btn-group" role="group">
                                            <a href="{{ url_for('task.task_form', id=task.id) }}" class="btn btn-sm btn-outline-primary">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            <button class="btn btn-sm btn-outline-danger" onclick="deleteTask({{ task.id }})">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% else %}
                <div class="text-center py-5">
                    <i class="fas fa-plus-circle fa-3x text-muted mb-3"></i>
                    <h5>暂无创建的任务</h5>
                    <p class="text-muted">您目前还没有创建任何任务</p>
                    <a href="{{ url_for('task.task_form') }}" class="btn btn-primary">
                        <i class="fas fa-plus me-2"></i>创建第一个任务
                    </a>
                </div>
            {% endif %}
        </div>
    </div>
</div>

<script>
function filterTasks(status) {
    // 更新按钮状态
    document.querySelectorAll('.btn-group .btn').forEach(btn => {
        btn.classList.remove('active');
    });
    event.target.classList.add('active');
    
    // 过滤任务
    const rows = document.querySelectorAll('tbody tr');
    rows.forEach(row => {
        if (status === 'all' || row.dataset.status === status) {
            row.style.display = '';
        } else {
            row.style.display = 'none';
        }
    });
}

function deleteTask(taskId) {
    if (confirm('确定要删除这个任务吗？此操作不可撤销。')) {
        fetch(`/api/task/${taskId}`, {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json',
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showFlashMessage('任务已成功删除', 'success');
                location.reload();
            } else {
                showFlashMessage('删除失败: ' + data.message, 'error');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showFlashMessage('删除失败，请稍后重试', 'error');
        });
    }
}
</script>
{% endblock %}